<template>
  <div class="home">
    <p>a:{{ a }}</p>
    <p>d:{{ d }}</p>
    <p>c:{{ c }}</p>

    <p>
      <span v-for="(item, i) in arr" :key="i">{{ item }} +++</span>
    </p>
    <div><button type="button" @click="updateArr">updateArr</button></div>
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch } from 'vue'
/* 
var user = {
  name: 'wqw',
  get fullName() {
    // 加get 标志，表示获取对象指定属性的值
    return this.name
  },

  set fullName(v) {
    // 加set 标志，表示修改对象指定属性的值。
    this.name = v
  }
}
console.log(user.fullName) // 'wqw', 相当于调用的时getter方法
user.fullName = 123 // 赋值，就时调用setter方法
console.log(user.fullName) // 123

// 面试题：有一个变量a = 1, 如何实现每次输出一次a的值，a 递增。
var a = 1
var obj = {
  v: a,
  get a() {
    return this.v++
  }
}
console.log(obj.a) // 1
console.log(obj.a) // 2
console.log(obj.a) // 3
console.log(obj.a) // 4
 */
export default {
  name: 'HomeView',
  data() {
    return {
      myName: 'wenqingwu'
    }
  },
  mounted() {},
  // 组合式API：
  setup() {
    let data = reactive({
      a: 1,
      b: 2,
      c: '',
      arr: [1, 2, 3, 5],
      setA: () => {
        console.log(this.a)
      }
    })

    const updateArr = () => {
      data.arr.push('2342', '23424')
      data.a = 10 // 触发data.d的计算属性中的getter，
      data.d = 20 // 触发data.d的计算属性中的setter，
    }

    // 计算属性的写法1：
    // data.d = computed(() => {
    //   return data.a + data.b
    // })
    // 计算属性的写法2：
    data.d = computed({
      get: () => {
        return data.a + data.b
      },
      set: v => {
        data.c = data.a + data.b - v
      }
    })
    // eslint-disable-next-line
    // 把对象中所有的属性都变成一个独立的响应式变量，方便在 template 中使用

    return {
      ...toRefs(data),
      updateArr
    }
  }
}
</script>
